import React from 'react'

import "./index.scss"

const Table = (props:TableProps)=>{
  const { data, columns, rowKey, pagination, onChange } = props

  const content = ()=>{
    let fields = new Array<string>()
    let keyField:React.Key = rowKey
    let thead
    if(columns && columns.length>0){
      const ths = columns.map(col=>{
        fields.push(col.field)
        return <th>{col.field}</th>
      })
      thead = <thead><tr>{ths}</tr></thead>
    }
    let tbody = <div>Nothing</div>
    if(data){
      const trs = data.map((row:any)=>{
        const tds = fields.map(k=>{
          return <td>{row[k]}</td>
        })
        return <tr key={row[keyField]}>{tds}</tr>
      })
      tbody = <tbody>{trs}</tbody>
    }
    let ul
    if(pagination.total>0){
      let lis = []
      lis.push(<li className="pagination-total">显示1-{pagination.size}/共{pagination.total}条记录</li>)
      let paginationSize = pagination.total/pagination.size + 1
      const moreThan = paginationSize>10
      const countSize = moreThan?10/2:paginationSize
      for(let i=1; i<=countSize; i++){
        lis.push(<li title={i.toString()} className="pagination-item"><a href="#" onClick={()=>onChange(i)}>{i}</a></li>)
      }
      if(moreThan){
        lis.push(<li title="向后5页"></li>)
        lis.push(<li title={paginationSize.toString()}></li>)
      }
      ul = <ul>{lis}</ul>
    }
    let tfoot = <tfoot><div>{ul}</div></tfoot>
    const table = <table>{thead}{tbody}{tfoot}</table>
    return table
  }
  return (
    <div>{content()}</div>
  )
}

export {
  Table
}